Qt中使用QWebEngineView控件加载HTML使用及问题 | 您所在的位置:网站首页 › webview显示不出来页面 win10 › Qt中使用QWebEngineView控件加载HTML使用及问题 |
「这是我参与11月更文挑战的第3天,活动详情查看:2021最后一次更文挑战」 前一段时间项目中用到了加载html的功能,也遇到了一些比较奇奇怪怪的问题。 我的开发版本以及环境:VS2017 + Qt5.14.2 遇到的问题如下: 1:加载自己写的本地的html页面时,为什么第一次会很慢? 2:在一些电脑上加载html时,为什么会出现黑屏现象? 针对上述两个问题,开展我对QWebEngineVie控件的使用以及理解吧! 1:添加控件我们需要从QtDesigner中拖出一个承载html的控件,叫做QWebEngineView。 使用QWebEngineView加载html的方法有三种,这里我选中的是下面这种方法: QWebEngineView::setUrl那么,接下来是具体的加载方式: QString qsHtmlPathRobot = QCoreApplication::applicationDirPath() + "/test/test.html"; QUrl baseUrlRobot = "file:///" + qsHtmlPathRobot; QFile fileRobot(qsHtmlPathRobot); if (!fileRobot.open(QIODevice::ReadOnly)) { return; } fileRobot.close(); ui.webRobot->setUrl(baseUrlRobot);在加载html时,我们最好的方法就是先判断该路径是否存在,为了安全起见而已。 到这里,我们就会遇到开篇说的第一个问题,加载html会很慢。 因为html页面是自己写的自定义页面,在加载该页面时内容较多,比较慢,所以,我会将加载这部分放到了构造函数中。提前加载,解决加载慢的问题。 但是,又会出现另一种情况,如果该窗口是隐藏状态,即使是提前加载了html页面,也不会显示出来的。 不知道大家有没有遇到过这种问题,在我所用的开发环境中是出现的。 为了避免这个问题,当我加载这承载html的QWidget类时,将该类做了一些小改动 QtHtmlWidget *pHtml = new QHtmlWidget; pHtml->setGeometry(-100, -100, 10, 10); pHtml->show();将该窗口的位置移动到程序中不可见的位置,这样就解决了问题1的情况。 3:Qt触发HTML消息在我用到的功能中,我需要点击一个按钮,来更改html上显示的数据,那么用到的函数是: runJavaScript具体的使用情况: ui.webHtml->page()->runJavaScript(qsHtmlParamter);其中,qsHtmlParamter是需要传入的参数。 4:HTML触发QT响应在使用该功能时,与上述3中的功能会有一些不同。 QT在与HTML交互中,Qt用到了一个叫做:QWebChannels的类。 HTML中需要用到的是:qwebchannel.js 具体的HTML的发送这里不在进行详细解释,那么,在Qt这边我们该如何接收发送的消息呢? 首先,需要定义QWebChannels类来进行接收 #include QWebChannel* m_pWebChannel; m_pWebChannel = new QWebChannel(this); //注册一个对象,html端通过此名称向PC端发送消息 m_pWebChannel->registerObject(QString("qtClicked"), this); ui.webRobot->page()->setWebChannel(m_pWebChannel);这里我定义的对象名称叫做"qtClicked",大家可以根据实际项目情况,与WEB端共同商量定义的。 定义成功之后,下面是最重要的一点,我们想要接收HTML的触发消息内容,在Qt这里,必须要与HTML的发送消息名称一致。 假设,HTML设置的发送函数名叫做,“sendMsg”,那么在QT端也必须要创建一个叫做该名称的函数,写法按照下面的格式进行。 public slots: void sendMsg(const QString& jsMsg); //接收html的消息最最重要的是:一定要记得写 public slots,否则QT端无法接收到消息。 到这里,简单的两端通讯已经完成了,操作起来很简单。 那么,我遇到的第二个问题该如何解决呢?当我的功能开发完成之后,进入到测试阶段时,发现在有些电脑上html页面居然是黑屏,真的是无从下手,如果有遇到与我同样的问题的伙伴们,我来把解决方法推荐给大家。 在main.cpp中添加以下这段话,就可以完美解决该问题啦~ QApplication::setAttribute(Qt::AA_UseOpenGLES);添加的方式,如下图所示: qt quick版本大于 5.3时才可以使用,强制使用open gl ES2.0的版本 如果硬件不是很老,尽量不要禁用硬件加速 今天的更新到这里就结束了~ 如有问题,我们可以相互学习,共同进步! 共勉!! |
CopyRight 2018-2019 实验室设备网 版权所有 |